// pages/leftswipedelete/leftswipedelete.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    itemDatas: [{ content: '列表数据001' }, { content: '列表数据002' }, { content: '列表数据003' }, { content: '列表数据004' }, { content: '列表数据005' }, { content: '列表数据006' }, { content: '列表数据007' }, { content: '列表数据008' }, { content: '列表数据009' }, { content: '列表数据0010' }, { content: '列表数据0011' }, { content: '列表数据0012' }, { content: '列表数据0013' }],
    delBtnWidth: 80, //删除按钮宽度单位（px）
    startX: -1,
    lastDeleteShowIndex: -1,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },


  //手指刚放到屏幕触发
  touchS: function (e) {
    console.log("touchS" + e);
    //首先判断此时其他的cell还有没有处于展示删除按钮中，如果有的话，需要回复原样
    var currentIndex = e.currentTarget.dataset.index
    if (this.data.lastDeleteShowIndex >= 0 && currentIndex != this.data.lastDeleteShowIndex) {
      var parPath = 'itemDatas[' + this.data.lastDeleteShowIndex + '].txtStyle'
      this.setData({
        [parPath]: "left:0px"
      })
    }



    //判断是否只有一个触摸点
    if (e.touches.length == 1) {
      this.setData({
        //记录触摸起始位置的X坐标
        startX: e.touches[0].clientX
      });
    }
  },
  //触摸时触发，手指在屏幕上每移动一次，触发一次
  touchM: function (e) {
    console.log("touchM:" + e);
    var that = this
    if (e.touches.length == 1) {
      //记录触摸点位置的X坐标
      var moveX = e.touches[0].clientX;
      //计算手指起始点的X坐标与当前触摸点的X坐标的差值
      var disX = that.data.startX - moveX;
      //delBtnWidth 为右侧按钮区域的宽度
      var delBtnWidth = that.data.delBtnWidth;
      var txtStyle = "";
      if (disX == 0 || disX < 0) {//如果移动距离小于等于0，文本层位置不变
        txtStyle = "left:0px";
      } else if (disX > 0) {//移动距离大于0，文本层left值等于手指移动距离
        txtStyle = "left:-" + disX + "px";
        if (disX >= delBtnWidth) {
          //控制手指移动距离最大值为删除按钮的宽度
          txtStyle = "left:-" + delBtnWidth + "px";
        }
      }
      //获取手指触摸的是哪一个item
      var index = e.currentTarget.dataset.index;
      var list = that.data.itemDatas;
      //将拼接好的样式设置到当前item中
      list[index].txtStyle = txtStyle;
      //更新列表的状态
      this.setData({
        itemDatas: list
      });
    }
  },
  touchE: function (e) {
    console.log("touchE" + e);
    var that = this
    if (e.changedTouches.length == 1) {
      //手指移动结束后触摸点位置的X坐标
      var endX = e.changedTouches[0].clientX;
      //触摸开始与结束，手指移动的距离
      var disX = that.data.startX - endX;
      var delBtnWidth = that.data.delBtnWidth;
      //如果距离小于删除按钮的1/2，不显示删除按钮
      if (disX > delBtnWidth / 2) {
        that.data.lastDeleteShowIndex = e.currentTarget.dataset.index
      }
      var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "px" : "left:0px";
      //获取手指触摸的是哪一项
      var index = e.currentTarget.dataset.index;
      var list = that.data.itemDatas;
      list[index].txtStyle = txtStyle;
      //更新列表的状态
      that.setData({
        itemDatas: list
      });
    }
  }
})